import { Button, Card, Descriptions, Skeleton, Tag } from "antd";
import { useEffect, useState } from "react";
import useCloseLoadingOnMount from "../../../utils/hook/useCloseLoadingOnMount";
import businesssApi from "../../../apis/businesssApi";
import { useNavigate, useParams } from "react-router-dom";
import ComponentHeader from "../../../components/Page/ComponentHeader";
import { hb, hb2 } from "../../../utils/common";

const BusinessDetail = () => {
  useCloseLoadingOnMount();
  const [loading, setLoading] = useState(true);
  const [business, setBusiness] = useState({});
  const navigate = useNavigate();

  const params = useParams();

  const fetchData = async () => {
    setLoading(true);
    const res = await businesssApi.getBusinesssDetail(params.id);
    if (res.status >= 0) {
      setBusiness(res.data);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleEdit = () => {
    navigate("/business/edit/" + params.id);
  };

  return (
    <>
      {loading ? (
        <Skeleton active paragraph={{ rows: 10 }} />
      ) : (
        <Card>
          <Descriptions
            title={
              <ComponentHeader
                title={"商家详情"}
                extra={
                  <Button color="volcano" variant="filled" onClick={handleEdit}>
                    编辑
                  </Button>
                }
              />
            }
            bordered
            column={2}
          >
            <Descriptions.Item label="店铺名称">
              {hb(business.name2)}
            </Descriptions.Item>
            <Descriptions.Item label="店长名称">
              {hb(business.managerName)}
            </Descriptions.Item>
            <Descriptions.Item label="电话号码">
              {hb(business.phone)}
            </Descriptions.Item>
            <Descriptions.Item label="微信号">
              {hb(business.openId)}
            </Descriptions.Item>
            <Descriptions.Item label="账号">
              {hb(business.account)}
            </Descriptions.Item>
            <Descriptions.Item label="是否激活">
              {hb2(business.isActive, () =>
                business.isActive == 0 ? (
                  <Tag>未激活</Tag>
                ) : (
                  <Tag color="green">已激活</Tag>
                )
              )}
            </Descriptions.Item>
            <Descriptions.Item label="是否禁用">
              {hb2(business.isBan, () =>
                business.isBan == 0 ? (
                  <Tag color="green">未禁用</Tag>
                ) : (
                  <Tag color="red">已禁用</Tag>
                )
              )}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {hb(business.createTimeStr)}
            </Descriptions.Item>
            <Descriptions.Item label="修改时间">
              {hb(business.updateTimeStr)}
            </Descriptions.Item>
          </Descriptions>
        </Card>
      )}
    </>
  );
};

export default BusinessDetail;
